<style>
    .ui-home {
        width: 100vw;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: auto;
    }

    .item {
        width: 50px;
        height: 50px;
        border: 1px dashed gray;
    }

    .item:nth-child(even) {
        background: rgba(0, 0, 0, 0.1);
    }

    fieldset>* {
        margin: 0.2em;
    }

    /* 进度条 */
    .label-progress {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .label-progress progress {
        width: 100%;
        height: 20px;
    }

    .label-progress span {
        position: absolute;
    }

    .label-progress progress:per {}
</style>

<dom>
    <div class="ui-home">
        <div class="title">
            界面参考
        </div>
        <fieldset>
            <legend>布局</legend>
            <div class="row" style="flex-wrap: wrap;">
                <div style="margin:1em" class="item-contain col">
                    <div class="item">col1</div>
                    <div class="item">col2</div>
                    <div class="item">col3</div>
                </div>
                <div style="margin:1em" class="item-contain row">
                    <div class="item">row1</div>
                    <div class="item">row2</div>
                    <div class="item">row3</div>
                </div>
                <div $="dragContain" style="
                position: relative;
                margin: 1em;
                /* width: 200px; */
                height: 200px;
                border: 1px dashed white;
                flex-grow: 1;
                min-width: 150px;" class="item-contain row">
                    <div $="dragItem" class="item" style="border:none;background:#393939;color:white;position:absolute">
                        可拖拽</div>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>滑动条</legend>
            <div>
                <ref ctor="Slider" />
            </div>
        </fieldset>
        <fieldset>
            <legend>标签</legend>
            <div>
                <ref ctor="TabView" />
            </div>
            <div>
                <ref ctor="TabViewVerticle" />
            </div>
        </fieldset>
        <fieldset>
            <legend>进度条</legend>
            <div>
                <div class="label-progress">
                    <span>Loading</span>
                    <progress style="height:40px"></progress>
                </div>
                <ref ctor="Progress" style="background:#393939;border-radius:1em" $="pb"></ref>
            </div>
        </fieldset>

        <fieldset>
            <legend>文字</legend>
            <div class="title">标题</div>
            <div class="nav">
                <div>标题2</div>
                <div>
                    <button>删除</button>
                    <button>进入</button>
                </div>
            </div>
            <div style="border:1px dashed gray;">
                <p>然而，小明也遇到了一些危险。他遭遇了一群凶猛的狼，但他机智地躲避了它们。他还遇到了一个邪恶的巫师，巫师想要夺取他的地图和宝藏。小明勇敢地与巫师战斗，并最终战胜了他。</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>按钮</legend>
            <button>按钮A</button>
            <button class="btn">按钮B</button>
            <button class="btn">带说明的按钮<span>说明</span></button>
            <button class="emoji-btn">⚽<span>足球</span></button>
        </fieldset>
        <fieldset>
            <legend>消息框</legend>
            <div class="row">
                <button @click="onClickMsgBox">Message Box</button>
                <button @click="onClickMsgBoxYesNo">Message Box(Yes,No)</button>
            </div>
        </fieldset>
        <fieldset> 
            <legend>输入框</legend>  
            <input placeholder="普通输入框" />
            <div class="row">
                <input placeholder="右边有按钮输入框" />
                <button>Submit</button>
            </div>
            <div class="row">
                <textarea>多行输入框</textarea>
            </div>
        </fieldset>
        <ref ctor="Folder" legend="可折叠区域">
            <div>123</div>
            <div>123</div>
            <div>123</div>
        </ref>
        <ref ctor="Folder" legend="可折叠区域">
            <div>123</div>
            <div>123</div>
            <div>123</div>
        </ref>
        <fieldset>
            <legend>选择</legend>
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
            </select>
            <div class="row">
                <label>选择性别</label>
                <select>
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>
        </fieldset>
    </div>
</dom>